<template>
  <div>
    <h2>{{ mm }}</h2>
    <h2>{{ pp }}</h2>
    <h2>{{ person.name }}</h2>
    <h2>{{ person.age }}</h2>
    <h2>{{ person.title }}</h2>
    <h2>{{ person.subject.lesson }}</h2>
    <h2>{{ person.subject.scores.firstCode }}</h2>
    <h2>{{ person.subject.scores.secondCode }}</h2>
    <button @click="changeStatus">改变值的状态</button>
  </div>
</template>
<script>
import { ref, reactive, watchEffect} from "vue";

export default {
  name: "Test",
  setup() {
    let mm = ref("xfsss");
    let pp = ref("oooo");

    const person = reactive({
      name: "xfj",
      age: 26,
      title: "小芳",
      subject: {
        lesson: "数学",
        scores: {
          firstCode: 38,
          secondCode: 98,
        },
      },
    });

    function changeStatus() {
      person.name = "lzj";
      person.age = "27";
      person.title = "大笨蛋";
      person.subject.lesson = "物理";
      person.subject.scores.firstCode = 12;
      person.subject.scores.secondCode = 222;

      mm.value = "xxxx";
      pp.value = "llll";
    }


    //只要函数体里有用到数据 就会被检测
    watchEffect(()=>{
      console.log("有属性被改变了");
      let x = person.name
      let y = person.age
    })

    return {
      mm,
      pp,
      person,
      changeStatus,
    };
  },
};
</script>
<style>
</style>